右侧漂浮导航
<template>
  <div class="RightNav">
    <ul>
      <li @click="myCenter">
        <span class="iconfont">&#xe607;</span>
        <i>个人中心</i>
      </li>
      <li @click="myCollection">
        <span class="iconfont">&#xe629;</span>
        <i>我的收藏</i>
      </li>
      <li @click="shoppingCart">
        <span class="iconfont">&#xe60a;</span>
        <i>购物车</i>
      </li>
      <li @click="OnlineService">
        <span class="iconfont">&#xe63f;</span>
        <i>在线客服</i>
      </li>
      <li @click="scrollinit">
        <span class="iconfont">&#xe600;</span>
        <i>返回顶部</i>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "RightNav",
  methods: {
    // 个人中心
    myCenter() {
      this.$router.push({
        name: "myOrder",
        params: {
          id: "0"
        }
      })
    },
    // 我的收藏
    myCollection() {
      this.$router.push({
        name: "myOrder",
        params: {
          id: "4"
        }
      })
    },

    // 购物车
    shoppingCart() {
      this.$router.push("/shoppingCart")
    },

    // 在线客服
    OnlineService() {
      this.$notify.info({
        title: "非常抱歉 ！！！",
        message: "此功能正在努力开发中..."
      })
    },

    // 返回顶部
    scrollinit() {
      document.documentElement.scrollTop = 0
    }
  }
}
</script>
<style lang="scss" scoped>
.RightNav {
  ul {
    // background: #e68303;
    li {
      width: 35px;
      height: 35px;
      position: relative;
      // border-radius: 4px;
      background: #409eff;
      color: #db8617;
      text-align: center;
      line-height: 35px;
      cursor: pointer;
      // margin-top: 5px;
      border-bottom: 1px solid #db8617;
      // overflow: hidden;
      &:last-child {
        border: none;
      }
      i {
        position: absolute;
        top: 0px;
        right: -17px;
        z-index: -1;
        width: 50px;
        padding-left: 2px;
        height: 35px;
        color: #a82323;
        font-size: 12px;
        letter-spacing: 0px;
        line-height: 35px;
        background: #409eff;
      }
      &:hover {
        span {
          color: #fff;
          transition: all 0.3s;
        }
        i {
          transition: all 0.3s;
          color: #fff;
          right: 35px;
        }
      }
    }
  }
}
</style>
